<template>
  <div
    class="VideoList"
    v-infinite-scroll="videoLoadMore"
    infinite-scroll-disabled="loading"
    infinite-scroll-distance="10"
  >
    <div class="videoListlayout">
      <div
        class="videoItem"
        v-for="item in videoItemList"
        :key="item.id"
        v-on:click="goView('VideoDetails')"
      >
        <div
          class="item_img"
          :style="{ backgroundImage: 'url(' + item.img + ')' }"
        ></div>
        <p class="item_title">
          {{ item.title }}
        </p>
        <p class="item_time">发布时间 : {{ item.time }}</p>
      </div>
    </div>
    <div style="height: 4.6875rem;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      videoItemList: [],
      nowPage: 1,
      limit: 10
    };
  },
  created() {},
  methods: {
    // 滚动到底部执行这个方法
    videoLoadMore() {
      let me = this;
      this.loading = true;
      this.$axios
        .post("/api/apply/lesson_train", {
          page: this.nowPage,
          limit: this.limit
        })
        .then(response => {
          //如果请求出现错误
          if (response.code != 200) {
            console.log(response.msg);
            me.loading = false;
            return;
          }

          me.nowPage = me.nowPage + 1;
          let newList = response.data;
          me.videoItemList.push.apply(me.videoItemList, newList);

          me.loading = false;
        })
        .catch(error => {
          console.log(error);
          me.loading = false;
        });
    },
    goView(path) {
      console.log(path);
      this.$router.push({
        name: path
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.VideoList {
  width: 21.5625rem;

  .videoListlayout {
    width: 21.5625rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .videoItem {
      margin-top: 0.9375rem;
      .item_img {
        width: 10.3125rem;
        height: 6.25rem;
        background-color: #234567;
        border-radius: 0.625rem;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        border: 1px solid #999999;
      }

      .item_title {
        width: 10.3125rem;
        margin: 0rem;
        margin-top: 0.625rem;
        font-size: 0.8125rem;
        color: #333333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .item_time {
        margin: 0rem;
        margin-top: 0.3125rem;
        font-size: 0.625rem;
        color: #999999;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
